<template>
	<view>
		<view class="hader">
			<view>
				<image @click="haderPortrait" :src='haerd.image|| "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=1d379f0aa044ad342ebf878fe0a30c08/19febb13b07eca80e92c0400902397dda044831f.jpg"'
				 mode=""></image>
			</view>
			<view>{{haerd.nickname}}</view>
			<view>
				<u-icon @click='haderLookFor' name="search" size="48"></u-icon>
			</view>
			<view>
				<u-icon @click='haderPush' name="plus-circle" size="48"></u-icon>
			</view>
		</view>
		<u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		name: 'chatHader',
		data() {
			return {
				list: [{
					text: '点赞',
					color: 'blue',
					fontSize: 28,
					subText: '感谢您的点赞'
				}, {
					text: '好友申请'
				}, {
					text: '评论'
				},
				],
				show: false
			}
		},
		props: {
			haerd:{},
		},
		methods: {
			haderPortrait() {
				this.$emit('haderPortrait')
			},
			haderLookFor() {
				this.$emit('haderLookFor')
			},
			haderPush() {
				this.show = true
				this.$emit('haderPush', this.show)
			},
			click(index, data) {
				this.$emit('indexIdClick', {index:index+1,data:this.list[index]})
				// console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
			}
		}
	}
</script>

<style scoped lang="less">
	.hader {
		display: flex;
		padding: 10px;
		view:nth-child(1) {
			width: 10%;
		}

		view:nth-child(2) {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50%;
		}

		view:nth-child(3) {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 20%;
		}

		view:nth-child(4) {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 20%;
		}

		image {
			border-radius: 10rpx;
			width: 68rpx;
			height: 68rpx;
		}
	}
</style>
